<div [class]="'el-step ' + (!root.simple ? 'is-' + root.direction : '')" [class.is-simple]="root.simple"
    [class.is-center]="root.alignCenter && !root.simple && !isVertical()"
    [class.is-flex]="isLast() && !root.alignCenter && !root.simple" [style]="makeStepStyles()">
    <div [class]="'el-step__head is-' + currentStatus()">
        <div class="el-step__line"
            [ngStyle]="{         'margin-right': isLast() ? '' : root.offset + 'px',         'display': isLast() ? 'none' : 'block'}">
            <i class="el-step__line-inner" [style]="makeLineStyles()"></i> </div>
            <span [class]="'el-step__icon ' + (icon ? 'is-icon' : 'is-text')">
            <ng-container *ngIf="currentStatus() !== 'success' && currentStatus() !== 'error'"> <i *ngIf="icon"
                    [class]="'el-step__icon-inner el-icon-' + icon"></i>
                <div *ngIf="!icon && !root.simple" class="el-step__icon-inner">{{ index + 1 }}</div>
            </ng-container> <i *ngIf="currentStatus() === 'success' || currentStatus() === 'error'"
                [class]="'el-icon-' + (currentStatus() === 'success' ? 'check' : 'close') + ' el-step__icon-inner is-status'">
            </i>
        </span>
    </div>
    <div class="el-step__main">
        <div [class]="'el-step__title ' + 'is-' + currentStatus()" #titleRef>
            <ng-container>{{ title }}</ng-container>
        </div>
        <div *ngIf="root.simple" class="el-step__arrow"></div>
        <div [class]="'el-step__description ' + 'is-' + currentStatus()">
            <ng-container>{{ description }}</ng-container>
        </div>
    </div>
</div>